<template>
	<view class="bg-img">
		<userinfo v-if="user_options.toLogin" id="user" :options="user_options" bind:getUserscope="getUserInfo" bind:toLogin="getUserInfo"></userinfo>
		<view class="container" v-if="listdata">
			<view class="topbox">
				{{village_name}}欢迎您
			</view>
			<view class="strip"></view>
			<view class="paycard">
				<view class="moneybox">
					<view class="moneynum">
						<view class="num">{{listdata.visitor_name}}<text style="font-size: 26rpx;color: #CCCCCC;margin-left: 15rpx;">访客</text></view>
						<view>{{listdata.visitor_phone}}</view>
						<view class="text">{{listdata.visitor_time}} 拜访</view>
					</view>
					<view class="mini-icon">
						<image :src="listdata.qrcode_url" class="icon-img"></image>
					</view>
				</view>
				<view class="flex-box" v-if="listdata.car_id">
					<view class="text1">车牌号</view>
					<view class="flex-box1">
						<view class="text">{{car_id}}</view>
						<image @tap="input_num" src="../../../static/images/bianjichepai.png" mode="" class="iconimg"></image>
					</view>
				</view>
				<!-- 开门 start-->
				<!--  #ifdef  MP-WEIXIN -->
				<view class="flex-box" v-if="config.house.house_door && (config.house.show_open_door_btn == '1' || doorList.length > 0)">
					<view class="text1" style="display: flex;flex-direction: row;align-items: center;">
						<text>智能门禁</text> 
						<image src="../../../static/images/tishi.png" mode="" class="iconimg"></image></view>
					<view class="flex-box1" @tap="goOpenDoor">
						<view class="text">去开门</view>
						<image src="../../../static/images/kaimen.png" mode="" class="iconimg"></image>
					</view>
				</view>
				<!--  #endif -->
				<!-- 开门 end -->
				<view class="flex-box">
					<view class="text1">业主姓名</view>
					<view class="flex-box1">
						<view class="text">{{listdata.owner_name}}</view>
					</view>
				</view>
				<view class="flex-box">
					<view class="text1">联系方式</view>
					<view class="flex-box1">
						<input type="text" :disabled="!disableds" class="ipt-box1" value="" placeholder-class="ipt_box" :placeholder="listdata.owner_phone"/>
					</view>
				</view>
				<view class="flex-box">
					<view class="text1">小区地址</view>
					<view class="flex-box1" @tap="goVillageAddress">
						<view class="text">{{listdata.village_address}}</view>
						<image src="../../../static/images/daohang.png" mode="" class="iconimg"></image>
					</view>
				</view>
				<view class="flex-box" v-if="listdata.room">
					<view class="text1">房间地址</view>
					<view class="flex-box1">
						<view class="text">{{listdata.room}}</view>
					</view>
				</view>
				<view class="flex-box" style="align-items: inherit;border: 0;margin-top: 20rpx;">
					<view class="dot"></view>
					<view class="text2" style="font-size: 24rpx;">欢迎您来到我们的小区，这是我们小区停车收费的标准,请查收!</view>
				</view>
				<view class="flex-box" style="align-items: inherit;">
					<view class="dot"></view>
					<view class="text2" style="font-size: 24rpx;">在到访时间内可点击页面中的去开门开启小区的大门及到访的单元门。</view>
				</view>
			</view>
		</view>
		<view>
			<uni-popups ref="popups" type="center" style="width: 100%;">
				<view class="pop-box">
					<view class="pop-text">请输入车牌号</view>
					<view class="input-box1">
						<view class="left-box" @tap="selectCar_id">
							<view class="left-text">{{carnum}}</view>
							<image src="../../../static/mall/rg_icon.png" class="bottom-img" mode=""></image>
						</view>
						<view class="right-box">
							<input type="text" value="" v-model="car_num"  class="input-box2"/>
							<image src="../../../static/images/guanbi.png" @tap="clearinput" class="bottom-img1" mode=""></image>
						</view>
					</view>
					<view class="pop-btn">
						<view class="btn1" @tap="canenl" style="background-color: #C7C7C7;">取消</view>
						<view class="btn1" @tap="Confirmbtn" style="margin-left: 50rpx;">确定</view>
					</view>
				</view>
			</uni-popups>
		</view>
		<view class="masks" v-if="showqipao" @tap="clickqipao">
			<image src="../../../static/images/qipao.png" mode="" class="qipao-img"></image>
		</view>
		<w-picker  mode="selector" :defaultVal="['京']" @confirm="ConfirmSex" ref="selector"
		 themeColor="#f00" :selectList="selectList"></w-picker>
	</view>
</template>

<script>
	import uniPopups from "../../../appComponent/uni/uni-popups/uni-popups.vue";
	import wPicker from "../component/w-picker/w-picker.vue";
	var door = require('../../../utils/door.js');
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getpaymentlist = () => {
		common.post('HouseApi&a=visitor_info', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			visitor_id: _this.visitor_id
		}, data => {
			console.log('++++', data)
			_this.showqipao = data.visitor_status
			_this.listdata = data;
			_this.car_id = data.car_id;
			_this.carnum = _this.car_id.substring(0,1);
			_this.edit_phone_status = data.edit_phone_status;
			_this.disableds = data.edit_phone_status;
		});
	};
	const getCarInfo = () => {
		common.post('HouseApi&a=edit_visitor_car', {
			visitor_id: _this.visitor_id,
			car_id: _this.car_id
		}, data => {
			console.log('++++', data)
			if(data == "修改成功"){
				_this.$refs.popups.close()
			}
		});
	};
	export default {
		data() {
			return {
				listdata: {},
				userInfo: '',
				user_options: {},
				village_id: 0,
				pigcms_id: 0,
				village_name:'',
				actcolor: '',
				btn_style: '',
				order_id: 0,
				visitor_id: "",
				car_id: '',
				edit_phone_status: false,
				disableds:false,
				car_num: '',
				showqipao: true,
				selectList:[{
					label:"京",
					value:0
				},{
					label:"津",
					value:1
				},{
					label:"冀",
					value:2
				},{
					label:"晋",
					value:3
				},{
					label:"蒙",
					value:4
				},{
					label:"辽",
					value:5
				},{
					label:"吉",
					value:6
				},{
					label:"黑",
					value:7
				},{
					label:"沪",
					value:8
				},{
					label:"苏",
					value:9
				},{
					label:"浙",
					value:10
				},{
					label:"皖",
					value:11
				},{
					label:"闽",
					value:12
				},{
					label:"赣",
					value:13
				},{
					label:"鲁",
					value:14
				},{
					label:"豫",
					value:15
				},{
					label:"鄂",
					value:16
				},{
					label:"湘",
					value:17
				},{
					label:"粤",
					value:18
				},{
					label:"桂",
					value:19
				},{
					label:"琼",
					value:20
				},{
					label:"渝",
					value:21
				},{
					label:"川",
					value:22
				},{
					label:"贵",
					value:23
				},{
					label:"云",
					value:24
				},{
					label:"藏",
					value:25
				},{
					label:"陕",
					value:26
				},{
					label:"甘",
					value:27
				},{
					label:"青",
					value:28
				},{
					label:"宁",
					value:29
				},{
					label:"新",
					value:30
				}],
				carnum: '',
				qrcode:'',
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			_this.qrcode = decodeURIComponent(options.qrcode)
			_this.visitor_id = options.visitor_id;
			// #ifdef H5
			console.log('准备跳小程序页', _this);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';

				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};

				// if(options.village_id && options.village_id != _this.village_id){
				// 	common.post('HouseApi&a=search_village', {
				// 		village_id: options.village_id
				// 	}, data => {
				// 		_this.village_logo = data.village_logo ? data.village_logo : data.wechat_share_img;
				// 		_this.village_id = options.village_id;
				// 		_this.village_name = options.village_name;
				// 		var res = {
				// 			village_id: _this.village_id,
				// 			village_name: _this.village_name,
				// 			village_logo: _this.village_logo
				// 		};
				// 		if(options.pigcms_id){
				// 			res.pigcms_id = options.pigcms_id;
				// 			_this.pigcms_id = options.pigcms_id;
				// 		}
				// 		uni.setStorageSync('village_key', res);

				// 		getlifePaylist();
				// 	});
				// 	return false;
				// }

				getpaymentlist()
			});
		},
		methods: {
			goVillageAddress(){
				uni.openLocation({
					latitude: _this.listdata.village_lat_gcj02,
					longitude: _this.listdata.village_lng_gcj02,
					scale: 15
				});
			},
			selectCar_id(){
				_this.$refs.selector.show()
				
			},
			btnpay() {
				uni.navigateTo({
					url: "/pages/village/my/lifepayment?current=1"
				})
			},
			input_num(){
				_this.$refs.popups.open()
			},
			canenl(){
				_this.$refs.popups.close()
			},
			// 确定修改
			Confirmbtn(){
				console.log("kankankankan",_this.car_num)
				_this.car_id = _this.carnum + _this.car_num
				getCarInfo()
				
			},
			clearinput(){
				_this.car_num = '';
			},
			goOpenDoor(e){
				uni.showLoading();
				
				if (app.globalData.is_login) {
					door.openIngDoor(_this, e, true);
				} else {
					_this.user_options = {
						toLogin: true
					}
					uni.hideLoading();
				}
			},
			ConfirmSex(val) {
				console.log("33333333",val)
				var indexs = _this.index_key;
				_this.carnum = val.result
			},
			clickqipao(){
				setTimeout(function(){
					_this.showqipao = false
				},5000)
			},
		},
		components: {
			uniPopups,
			wPicker
		},
	}
</script>

<style>
	page {
		/* background: rgb(245, 245, 245); */
		background-image: url(https://hf.pigcms.com/static/images/tongxingzheng.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		background-attachment: fixed;
	}
	/* .bg-img{
		background-image: url(../../../static/images/tongxingzheng.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		background-attachment: fixed;
		
	} */
	.container {
		margin: 0;
		padding: 0;
	}

	.topbox {
		width: 100%;
		height: 200rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 150rpx;
		color: #FFFFFF;
		font-weight: 700;
		/* background-color: #2681f3; */
	}

	.strip {
		margin: 0 50rpx;
		height: 20rpx;
		background-color: #116cde;
		opacity: 0.8;
		border-radius: 10rpx;
		margin-top: -70rpx;
		z-index: 99;
	}

	.paycard {
		margin: 0 60rpx;
		background-color: rgba(255,255,255,0.9);
		border-radius: 5rpx;
		margin-top: -8rpx;
		overflow: hidden;
		padding: 50rpx 0rpx;
	}

	.moneybox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 0rpx 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #F1F1F1;
	}

	.moneybox1 {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.moneynum {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.moneynum1 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex-grow: 3.5;
	}

	.num {
		font-size: 30rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
	}

	.text {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #999999;
	}
	.text2 {
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #999999;
	}
	.mini-icon {
		width: 150rpx;
		height: 150rpx;
	}

	.icon-img {
		width: 100%;
		height: 100%;
		display: block;
	}
	.text1 {
		line-height: 80rpx;
	}
	.flex-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 0 30rpx;
		border-bottom: 2rpx solid #F1F1F1;
	}
	.flex-box1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.iconimg {
		width: 30rpx;
		height: 30rpx;
		display: block;
		margin-left: 8rpx;
		flex-shrink: 0;
	}
	.dot {
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		border: solid 2px #2681f3;
		margin-top: 18rpx;
		flex-shrink: 0;
		margin-right: 15rpx;
	}
	.pop-box {
		width: 500rpx;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.pop-text {
		font-weight: 700;
		margin-top: 30rpx;
	}
	.select-address {
		border-bottom: 2rpx solid #CCCCCC;
	}
	.input-text {
		
	}
	.input-box1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 80rpx;
	}
	.left-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2rpx solid #eeeeee;
		padding: 15rpx 0rpx;
	}
	.right-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 15rpx;
		border-bottom: 2rpx solid #eeeeee;
		padding: 15rpx 0rpx;
	}
	.bottom-img {
		display: inline-block;
		width: 30rpx;
		height: 25rpx;
		transform: rotate(90deg);
	}
	.bottom-img1 {
		display: inline-block;
		width: 30rpx;
		height: 30rpx;
		border-radius: 30rpx;
		background: #F1F1F1;
	}
	.input-box2 {
		width: 250rpx;
	}
	.ipt_box {
		text-align: right;
	}
	.pop-btn {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}
	.btn1 {
		padding: 10rpx 50rpx;
		background: #2681f3;
		border-radius: 30rpx;
		color: #FFFFFF;
	}
	.masks {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: flex-end;
	}
	.qipao-img {
		width: 500rpx;
		height: 80rpx;
		display: block;
		margin-right: 20rpx;
	}
	/deep/ .uni-popup {
		z-index: 99;
	}
	/deep/ .uni-input-input {
		text-align: right;
	}
</style>